<template>
  <div class="custom-table">
    <el-table
      v-bind="tableProps"
      @selection-change="(selected) => $emit('onEvent', 'selection-change', selected)"
      @expand-change="(row, expandedRows) => $emit('onEvent', 'expand-change', row, expandedRows)"
    >
      <template v-for="({ children, ...item }, index) in columns">
        <el-table-column
          v-if="item.type==='expand'"
          :key="item.id || index"
          v-bind="item"
        >
          <template slot-scope="scope">
            <slot :props="scope" name="expand-area" />
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="!!children"
          :key="item.id || index"
          v-bind="item"
        >
          <template slot-scope="scope">
            <template v-for="(child, childidx) in children">
              <el-button
                v-if="child.type === 'button'"
                :key="childidx"
                v-bind="columnChildPropMapper(scope, child.key)||child.prop"
                @click="(e) => $emit('onEvent', 'btn-click', child.key, scope.row, e)"
              >
                {{ (columnChildPropMapper(scope, child.key)||{}).name||child.name }}
              </el-button>
              <el-tag
                v-if="child.type === 'tag'"
                :key="childidx"
                v-bind="columnChildPropMapper(scope, child.key)||child.prop"
              >{{ child.name }}</el-tag>
              <i
                v-if="child.type === 'icon'"
                :key="childidx"
                v-bind="columnChildPropMapper(scope, child.key)||child.prop"
              />
              <div
                v-if="child.type === 'html'"
                :key="childidx"
                v-html="columnChildPropMapper(scope, child.key)"
              />

            </template>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop==='name'" :key="item.id || index" v-bind="item">
          <template slot-scope="scope1">
            <i :class="item.icon" />
            <span style="margin-left: 10px">{{ scope1.row.name }}</span>
          </template></el-table-column>
        <el-table-column v-else :key="item.id || index" v-bind="item" />
      </template>
    </el-table>
    <el-pagination
      v-if="paginationProps"
      class="custom-pagination"
      v-bind="{ ...DEFAULT_PAGINATION_PROPS, ...paginationProps }"
      @size-change="
        (currnentSize) => $emit('onEvent', 'size-change', currnentSize)
      "
      @current-change="
        (currnentPage) => $emit('onEvent', 'current-change', currnentPage)
      "
    />
  </div>
</template>

<script>
export default {
  name: 'CustomTable',
  components: {

  },
  props: {
    columns: {
      type: Array,
      required: true
    },
    // eslint-disable-next-line vue/require-default-prop
    tableProps: {
      type: Object
    },
    //! 列表项>children项>prop的映射器
    columnChildPropMapper: {
      type: Function,
      default: function () {
        return null
      }
    },
    // 分页项配置项
    // eslint-disable-next-line vue/require-default-prop
    paginationProps: {
      type: Object,
      default: function () {
        return null
      }
    }
  },
  data () {
    const DEFAULT_PAGINATION_PROPS = {
      layout: 'sizes,total, prev, pager, next',
      total: 0,
      'page-sizes': [5, 10, 15, 20]
    }
    return {
      DEFAULT_PAGINATION_PROPS
    }
  },
  created () {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custom-pagination {
  float: right;
}
.custom-table::after {
  content: "";
  display: block;
  clear: both;
  height: 0; //兼容ie
  visibility: hidden;
}
</style>
